<template>
    <rx-dialog @handOk="handOk" @cancel="cancel">
        <a-form-model layout="vertical">
            <a-row :gutter="12">
                <a-col :span="12">
                    <a-form-model-item :label="i18n('date.dateFormat','日期格式')" >
                        <a-select :placeholder="i18n('date.dateFormat','日期格式')" v-model="config.format" :options="dateFormats" @change="formatChange"></a-select>
                    </a-form-model-item>
                </a-col>
                <a-col :span="12">
                    <a-form-model-item :label="i18n('date.selDate','选择日期')"  >
                        <a-date-picker v-model="time" allowClear :format="config.format" :showTime="isShowTime" @change="getDates"/>
                    </a-form-model-item>
                </a-col>
                <a-col :span="12">
                    <a-form-model-item :label="i18n('date.textColor','文本颜色')"  >
                        <a-input class="laWidth" v-model="config.textColor" type="color"/>
                    </a-form-model-item>
                </a-col>
                <a-col :span="12">
                    <a-form-model-item :label="i18n('date.textSize','文本大小')" >
                        <a-input-number v-model="config.textSize" :min="1" />
                    </a-form-model-item>
                </a-col>
                <a-col :span="12">
                    <a-form-model-item :label="i18n('date.fontStyle','文本粗细')" >
                        <a-select class="laWidth" v-model="config.fontStyle">
                            <a-select-option value="normal">{{i18n('date.normal','正常')}}</a-select-option>
                            <a-select-option value="bold">{{i18n('date.bold','加粗')}}</a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-col>
            </a-row>
        </a-form-model>
    </rx-dialog>
</template>

<script>
import {RxDialog, Util} from "@lowcode/jpaas-common-lib";
import moment from "moment";
export default {
    name: "InsertDateDialog",
    props:["layerid","lydata","destroy","dateConfig"],
    components:{
        RxDialog
    },
    data() {
        return {
            config:{
                name:"",
                format:"YYYY-MM-DD HH:mm:ss",
                textColor:"#000000",
                colors:"",
                textSize:20,
                fontStyle:"normal",
                type:"text"
            },
            dateFormats:[
                {label:'YYYY-MM-DD HH:mm:ss',value:'YYYY-MM-DD HH:mm:ss'},
                {label:'YYYY-MM-DD HH:mm',value:'YYYY-MM-DD HH:mm'},
                {label:'YYYY-MM-DD',value:'YYYY-MM-DD'},
                {label:'YYYY-MM',value:'YYYY-MM'},
                {label:'YYYY/MM/DD HH:mm:ss',value:'YYYY/MM/DD HH:mm:ss'},
                {label:'YYYY/MM/DD',value:'YYYY/MM/DD'}
            ],
            time:null
        }
    },
    computed:{
        isShowTime(){
            return this.config.format.indexOf('HH:mm') > -1 ;
        }
    },
    created() {
        if(this.dateConfig){
            this.config=Object.assign(this.config,this.dateConfig);
        }
        //默认为当前时间
        if(!this.config.name){
            this.time = moment().format(this.config.format || "YYYY-MM-DD HH:mm:ss");
        }else {
            this.time = moment(this.config.name,this.config.format)
        }
        this.config.name= this.time;
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"PdfSealSignature",key);
        },
        handOk(vm){
            if(!this.config.name){
                this.$message.warning(this.i18n('msa.selDateTips','请选择日期！'));
                vm.loading = false ;
                return
            }
            let rgbJson=Util.hexToRgb(this.config.textColor);
            this.config.colors=JSON.stringify(rgbJson);
            Util.closeWindow(this,"ok",this.config);
        },
        cancel(){
            Util.closeWindow(this,"cancel");
        },
        getDates(date,dateString){
            this.config.name = dateString ;
        },
        formatChange(format){
            this.time=moment(this.time).format(format);
            this.config.name =  this.time ;
        }
    },
    watch: {}
}
</script>

<style scoped>
</style>